<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      width: 100%;
      height: 100%;
    }

  </style>
</head>

<body>
  <div id="vbarChart" style="width:100%;height:100%;"></div>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <script>
    var vbarChart = echarts.init(document.getElementById('vbarChart'));
    var barOption = {
      title: {
        text: '近10年军工行业专利趋势分析',
        left: 'center',
        top: '2%',
        textStyle: {
          color: '#fff',
          fontSize: 22
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: "<b>{b}</b>年<b>{a}</b>领域专利数量: {c}"
      },
      backgroundColor: '#0A0F23',
      legend: {
        /*orient: 'horizontal',*/
        left: "7%",
        top: '6%',
        itemGap: 20,
        itemWidth: 10,
        itemHeight: 10,
        icon: 'rect',
        data: ['航空', '兵器', '核工业', '航天', '船舶', '电子'],
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '2%',
        top: '15%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        //在（type: 'category'）中设置data有效
        data: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
        splitLine: { //坐标轴在 grid 区域中的分隔线；
          show: false,
          lineStyle: { //分割线颜色，可设单个，也可以设置数组。
            color: 'rgba(170,172,178,0.33)'
          }
        },
        axisLine: { //坐标轴轴线相关设置。就是数学上的x轴
          show: true,
          lineStyle: {
            color: 'rgba(170,172,178,0.53)'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#FFF',
            fontSize: 16
          }
        }
      }],
      yAxis: [{
        type: 'value',
        min: 0,
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(170,172,178,0.33)'
          }
        },
        axisLine: { //坐标轴轴线相关设置。就是数学上的y轴
          show: true,
          lineStyle: {
            color: 'rgba(170,172,178,0.53)'
          }
        },
        splitArea: {
          show: false,
          areaStyle: {
            color: ['#112245', 'rgba(34,50,82,0.4)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#FFF',
            fontSize: 16
          }
        }
      }],
      series: [{
        name: '航空',
        type: 'line',
        smooth: true,
        stack: '总量',
        animationDuration: 2000,
        animationDelay: 12000,
        areaStyle: {
            normal: {
                color: '#f7e46c'
            }
        },
        data: [209, 314, 381, 462, 520, 846, 1024, 1126, 1357, 136]
      }, {
        name: '兵器',
        type: 'line',
        smooth: true,
        stack: '总量',
        animationDuration: 2000,
        animationDelay: 10000,
        areaStyle: {
            normal: {
                color: '#f8849b'
            }
        },
        data: [148, 176, 310, 428, 770, 905, 1105, 1167, 1065, 471]
      }, {
        name: '核工业',
        type: 'line',
        smooth: true,
        stack: '总量',
        animationDuration: 2000,
        animationDelay: 8000,
        areaStyle: {
            normal: {
                color: '#264c82'
            }
        },
        data: [253, 281, 462, 638, 1348, 1273, 1406, 1609, 1454, 855]
      }, {
        name: '航天',
        type: 'line',
        smooth: true,
        stack: '总量',
        animationDuration: 2000,
        animationDelay: 6000,
        areaStyle: {
          normal: {
            color: '#17d4ee'
          }
        },
        data: [273, 234, 306, 850, 1148, 1678, 2063, 1949, 1566, 861]
      }, {
        name: '船舶',
        type: 'line',
        smooth: true,
        stack: '总量',
        animationDuration: 2000,
        animationDelay: 4000,
        areaStyle: {
            normal: {
                color: '#4fac88'
            }
        },
        data: [322, 476, 580, 807, 1085, 1243, 1729, 2351, 2321, 1366]
      }, {
        name: '电子',
        type: 'line',
        smooth: true,
        stack: '总量',
        animationDuration: 2000,
        animationDelay: 2000,
        areaStyle: {
            normal: {
                color: '#64ddfc'
            }
        },
        data: [662, 947, 1391, 1726, 2043, 2304, 2777, 3218, 2870, 1628]
      }]
    };
    vbarChart.setOption(barOption);

  </script>
</body>

</html>
